<template>
  <div>
    <div v-show='!replyResult.showResult'>
      <QuestionPage
        :title='topicData.title'
        :markdown-content='topicData.detail'
        :tags='topicData.tags'
        @getCodeAnswer='getCodeAnswer'
        :code-template='topicData.codeTemplate'
        :read-only='false' />
      <!--提交按钮-->
      <a-button type='primary'
                :loading='loading'
                @click='submit'
                style='float: right;margin-top: 20px;'>提交
      </a-button>
    </div>
    <!--提交结果展示-->
    <ReplyResultPage
      v-show='replyResult.showResult'
      :status='replyResult.status'
      :reply-id='topicId'
      :isCountdown='replyResult.countdown'
      :subTitle='replyResult.subTitle' />
  </div>
</template>

<script>
import QuestionPage from '@/views/reply/components/QuestionPage.vue'
import ReplyResultPage from '@/views/reply/ReplyResultPage.vue'
import { getTopicDetail, getTopicDetailAndMyAns, replyAns, updateAns } from '@/api/newcomerTopic'

export default {
  name: 'QuestionReply',
  components: {
    QuestionPage,
    ReplyResultPage
  },
  created() {
    // 从路径中获取题目编号
    this.topicId = this.$route.query.topicId
    // 获取模式 reply / update
    let mode = this.$route.query.mode
    this.mode = mode
    if (mode === 'update') {
      // mode=update 发送请求获取题目详情和该用户所提交的答案
      getTopicDetailAndMyAns(this.topicId).then(response => {
        this.topicData = response.data
      })
    } else if (mode === 'reply') {
      // mode=reply 发送请求获取题目详情信息
      getTopicDetail(this.topicId).then(response => {
        this.topicData = response.data
      })
    } else {
      this.$router.push("/404")
    }
    
  },
  data() {
    return {
      mode: '',
      topicId: '',
      topicData: null,
      loading: false,
      replyResult: {
        // 是否展示结果
        showResult: false,
        // 提交状态
        status: 'error',
        // 提交返回的信息
        subTitle: '',
        // 是否开启倒计时
        countdown: false
      }
    }
  },
  methods: {
    getCodeAnswer(code) {
      this.topicData.codeTemplate = code
    },
    submit() {
      this.loading = true
      // 构建表单
      let answer = this.topicData.codeTemplate
      if (answer.length === 0) {
        this.loading = false
        this.$message.warn('答案不能为空')
        return
      }
      let form = {
        topicId: this.topicId,
        answer
      }
      // 提交答题
      if (this.mode === 'update') {
        updateAns(form).then(response => {
          if (response.code === 200) {
            this.replyResult.status = 'success'
          } else {
            this.replyResult.status = 'error'
          }
          this.replyResult.subTitle = response.msg
        })
      } else if (this.mode === 'reply') {
        replyAns(form).then(response => {
          if (response.code === 200) {
            this.replyResult.status = 'success'
          } else {
            this.replyResult.status = 'error'
          }
          this.replyResult.subTitle = response.msg
        })
      } else {
        this.$router.push("/404")
      }
      
      setTimeout(() => {
        // 展示结果页面
        this.replyResult.showResult = true
        // 开启倒计时
        this.replyResult.countdown = true
      }, 1000)
    }
  }
}
</script>

<style scoped>

</style>